<template>
    <div class="ban_wrapper">
          <div class="banner">
             <img @click="handleGayClick()" class="ban_img" src="//img1.qunarzz.com/sight/p0/1607/7c/7cda8b6782dabd80b4.img.jpg_600x330_8572a930.jpg" alt="">
              <div class="ban_jtou" @click="handleJtouClick()">
                <span class="iconfont icon-zuojiantou"></span>
              </div>
              <div class="ban_bot">
                  <div class="ban_shul">
                     <span class="iconfont icon-diqiu"></span>
                     <span>72</span>
                  </div>
                  <h4>上海迪士尼乐园</h4>
              </div>
          </div>
          <!--使用画廊组件-->
          <common-gay @closeSwiper="closeGallary()" v-show="this.showGallary"></common-gay>
    </div>
</template>

<script>
    //使用画廊组件
    import CommonGay from "@/common/gallary/gallary"
    export default {
        name: "banner",
        components:{
          CommonGay
        },
        data () {
           return {
             showGallary:false
           }
        },
        methods:{
          handleJtouClick () {
            this.$router.push("/");//编程式路由
          },
          handleGayClick(){
            this.showGallary=true;
          },
          closeGallary () {
            this.showGallary=false;
          }
        }
    }
</script>
<style lang="stylus" scoped>
    .banner
       position:relative;
       width: 100%
       height:0;
       padding-bottom:55%;
       .ban_img{
         width: 100%
       }
      .ban_jtou{
         position :absolute;
         width:.36rem;
         line-height:.36rem;
         top:.1rem;
         left:.1rem;
         border-radius:50%;
         background :black;
         text-align :center;
         opacity :.5;
         span{
           color:#fff;
           font-size :.2rem;
         }
      }
      .ban_bot{
        position:absolute;
        bottom:.05rem;
        left:.1rem;
        color:#fff;
        .ban_shul{
          color:#fff;
          font-size:.12rem;
          width: .6rem;
          height:.2rem;
          background-color black
          border-radius :.1rem;
          opacity .6;
          text-align center
          line-height .2rem;
        }
        h4{
          font-size :.18rem;
          margin:.05rem 0;
          color:white;
          text-shadow: 0 1px 2px rgba(0,0,0,0.70);
        }
      }
</style>
